﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Warehouse.aspx.cs" Inherits="Magazine" Trace="false" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <style type="text/css">
        .btnAddNewItem
        {
            color: Red;
            float: right;
            font-weight: bolder;
            text-align: center;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        function ShowInputDialog() {
            $("#InputDialog").css("display", "block");
            $("#InputBackground").css("display", "block");
            $("#InputDialog").find(':input').each(function () {
                switch (this.type) {
                    case 'text':
                        $(this).val('');
                        break;
                }
            });
        }

        function CloseInputDialog() {
            $("#InputDialog").css("display", "none");
            $("#InputBackground").css("display", "none");
            $("#Confirmation").css("display", "none");
        }
        function AddNewItem() {
            document.getElementById('MainContent_btnAddNewItemUnvisible').click();
        }
        function OnPageLoadedCheckConfirm() {
            if ($("#MainContent_btnAddNewItemUnvisible")[0].value == '0') {
                $("#ConfirmationText")[0].innerHTML = "Item Added";
                $("#InputBackground").css("display", "block");
                $("#Confirmation").css("display", "block");
            }
            else if ($("#MainContent_btnAddNewItemUnvisible")[0].value == '-1') {
                $("#ConfirmationText")[0].innerHTML = "Item Rejected";
                $("#InputBackground").css("display", "block");
                $("#Confirmation").css("display", "block");
            }
        }
    </script>
    <script type="text/javascript">
        function BlockUI(elementID) {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(function () {
                $("#" + elementID).block({ message: '<table align = "center" class="StatusBar"><tr><td>' +
     '<img src="loadingAnim.gif"/></td></tr></table>',
                    css: {},
                    overlayCSS: { backgroundColor: '#000000', opacity: 0.6, border: '3px solid #63B2EB'
                    }
                });
            });

            prm.add_endRequest(function () {
                $("#" + elementID).unblock();
            });
        }

        $(document).ready(function () {
            BlockUI("dvGrid");
            $.blockUI.defaults.css = {};
        });
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="Server">
    <asp:ScriptManager runat="server" />
    <div id="dvGrid" style="padding-top: 10px; padding-bottom: 10px; width: 100%">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div style="display: none;">
                    <asp:Button Text="" runat="server" ID="btnAddNewItemUnvisible" OnClick="btnAddNewItemUnvisible_Click" />
                </div>
                <div id="InputBackground" style="height: 100%; width: 100%; position: fixed; background-color: Gray;
                    opacity: 0.8; top: 0; z-index: 50; left: 0; display: none;">
                </div>
                <div id="Confirmation" style="background-color: White; border: 1px solid black; color: black;
                    font-size: larger; height: 46px; margin: auto; padding: 20px; position: absolute;
                    width: auto; display: none; z-index: 100; left: 45%; text-align: center;">
                    <div id="ConfirmationText">
                    </div>
                    <input type="button" name="btnCloseConfirmation" value="OK" onclick="CloseInputDialog(); 
            window.location.href = window.location.href; return;" style="margin-top: 10px; width: 100px;" />
                </div>
                <table id="InputDialog" style="height: 100%; left: 0; position: fixed; top: 0; width: 100%;
                    z-index: 100; display: none;">
                    <tr>
                        <td colspan="3" style="position: fixed; width: 100%; height: 25%;">
                        </td>
                    </tr>
                    <tr>
                        <td style="position: fixed; width: 25%; height: 50%; top: 25%;">
                        </td>
                        <td style="position: fixed; width: 50%; height: 50%; top: 25%; left: 25%;">
                            <div style="background-color: White; border: 1px solid black; padding: 10px; width: 275px;
                                height: 205px; color: black; font-size: larger; margin: auto; padding: auto">
                                <asp:Label ID="Label1" Text="Please fill in the details about new item:" runat="server" /><br />
                                <table border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblName" Text="Name:" runat="server" />
                                        </td>
                                        <td>
                                            <asp:TextBox ID="txtName" runat="server" Style="margin-left: 15px; width: 140px;" />
                                            <asp:RequiredFieldValidator ErrorMessage="Name field is required." ControlToValidate="txtName"
                                                runat="server" Style="font-weight: bold; color: Red;">*</asp:RequiredFieldValidator><br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblAmount" Text="Amount:" runat="server" />
                                        </td>
                                        <td>
                                            <asp:TextBox ID="txtAmount" runat="server" Style="margin-left: 15px; width: 140px;" />
                                            <asp:RequiredFieldValidator ErrorMessage="Amount field is required." ControlToValidate="txtAmount"
                                                runat="server" Style="font-weight: bold; color: Red;" Display="Dynamic">*</asp:RequiredFieldValidator>
                                            <asp:RegularExpressionValidator ID="regexAmountValidator" runat="server" ControlToValidate="txtAmount"
                                                ErrorMessage="Enter a valid number." Style="font-weight: bold; color: Red;" ValidationExpression="^\d+$"
                                                Display="Dynamic">*</asp:RegularExpressionValidator>
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblType" Text="Type:" runat="server" />
                                        </td>
                                        <td>
                                            <asp:DropDownList ID="ddlType" runat="server" DataTextField="name" DataValueField="typeCode"
                                                Style="margin-left: 15px; width: 148px;" />
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblCategory" Text="Category:" runat="server" />
                                        </td>
                                        <td>
                                            <asp:DropDownList ID="ddlCategory" runat="server" DataTextField="name" DataValueField="categoryCode"
                                                Style="margin-left: 15px; width: 148px;" />
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblDesciption" Text="Description:" runat="server" />
                                        </td>
                                        <td>
                                            <asp:TextBox ID="txtDescription" runat="server" Style="margin-left: 15px; width: 140px;" />
                                            <asp:RequiredFieldValidator ErrorMessage="Description field is required." ControlToValidate="txtDescription"
                                                runat="server" Style="font-weight: bold; color: Red;">*</asp:RequiredFieldValidator><br />
                                        </td>
                                    </tr>
                                </table>
                                <input type="button" name="btnClose" value="Cancel" onclick="CloseInputDialog(); return;"
                                    style="float: right; margin-top: 25px;" />
                                <input type="button" name="btnAdd" value="ADD" onclick="return AddNewItem();" style="float: right;
                                    margin-top: 25px;" />
                            </div>
                        </td>
                        <td style="position: fixed; width: 25%; height: 50%; top: 25%; left: 75%;">
                            <asp:ValidationSummary runat="server" Style="background-color: White; border: 1px solid black;
                                padding: 10px; width: 275px; height: auto; color: black; font-size: larger; margin: auto;
                                padding: auto; color: red; font-weight: bold;" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="position: fixed; width: 100%; height: 25%; top: 75%;">
                        </td>
                    </tr>
                </table>
                <h1 id="itemListTitle" runat="server" style="text-align: center; text-decoration: underline;
                    text-transform: capitalize; font-size: xx-large; font-weight: bolder; margin-bottom: 25px;">
                    Products in the Warehouse:</h1>
                <input type="button" id="opener" class="btnAddNewItem" value="Add new item" onclick="ShowInputDialog(); return false;" />
                <asp:Label ID="lblFilter" Text="Filter by:" runat="server" />
                <asp:Label ID="lblFilterCategory" Text="category:" runat="server" />
                <asp:DropDownList ID="CategoryFilterDropDownList" DataTextField="name" DataValueField="categoryCode"
                    runat="server" ViewStateMode="Enabled">
                </asp:DropDownList>
                <asp:Label ID="lblFilterType" Text="type:" runat="server" />
                <asp:DropDownList ID="TypeFilterDropDownList" DataTextField="name" DataValueField="typeCode"
                    runat="server" ViewStateMode="Enabled">
                </asp:DropDownList>
                <asp:Button ID="btnApplyFilter" Text="Apply filters" runat="server" OnClick="btnApplyFilter_Click"
                    EnableClientScript="False" CausesValidation="false" />
                <asp:Button ID="btnClearFilters" Text="Clear filters" runat="server" OnClick="btnClearFilters_Click"
                    EnableClientScript="False" CausesValidation="false" />
                <div class="items" style="">
                    <asp:ListView ID="itemsList" runat="server" GroupItemCount="4" OnPagePropertiesChanged="itemsList_PagePropertiesChanged">
                        <LayoutTemplate>
                            <table style="width: 100%">
                                <tr>
                                    <td>
                                        <table style="width: 100%; text-align: center; vertical-align: middle; border: 1px solid red;"
                                            cellpadding="5">
                                            <asp:PlaceHolder runat="server" ID="groupPlaceHolder"></asp:PlaceHolder>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </LayoutTemplate>
                        <GroupTemplate>
                            <tr>
                                <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
                            </tr>
                        </GroupTemplate>
                        <ItemTemplate>
                            <td style="border: 1px solid red;">
                                <h3>
                                    <asp:HyperLink ID="HyperLink1" NavigateUrl='<%# "~/ProductMag.aspx?code=" +  Eval("productCode") %>'
                                        runat="server" Text='<%# Eval("name") %>' />
                                </h3>
                                <br />
                                <img class="ProductImage" alt="<%# Eval("name") %>" src="Images/Image_not_found.jpg"
                                    style="width: 100px; height: 100px;" />
                                <h3>
                                    <asp:Label ID="lblPrice" Text='<%# "Amount: " +  Eval("amount") %>' runat="server"></asp:Label><br />
                                </h3>
                            </td>
                        </ItemTemplate>
                        <EmptyDataTemplate>
                            <div>
                                We are sorry - products with chosen properties could not be found.
                            </div>
                        </EmptyDataTemplate>
                    </asp:ListView>
                    <asp:DataPager ID="dpListView" runat="server" PagedControlID="itemsList" PageSize="4">
                        <Fields>
                            <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowLastPageButton="True" />
                        </Fields>
                    </asp:DataPager>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <script type="text/javascript">
        //call after page loaded
        window.onload = OnPageLoadedCheckConfirm; 
    </script>
</asp:Content>
